const path = require("path");
const name = "srd"; //项目名
module.exports = {
  // 开发生产环境
  publicPath:
    process.env.NODE_ENV === "production" // 项目根路径 分开发生产环境和正式环境
      ? "./" // 正式环境
      : "/",

  // 项目打包输出路径
  outputDir: "dist",

  // 打包文件名是否输出hash值
  filenameHashing: true,

  // 代码 正式环境是否要source map （便于调试找到问题源码位置）
  productionSourceMap: true,

  // crossorigin:'', // html入口文件外部请求资源跨域设置
  css: {
    // 样式加载配置
    // requireModuleExtension: false, // 启用 CSS Modules 文件后缀添加.module视为使用
    sourceMap: true, // 样式文件 正式环境是否要source map
    loaderOptions: {
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          require("postcss-pxtorem")({
            // px转rem插件
            rootValue: 16,
            unitPrecision: 5,
            propList: ["font", "font-size", "line-height", "letter-spacing"],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
          })
        ]
      },
      // 各种样式加载器loader内部配置
      // css: {
      //   // 这里的选项会传递给 css-loader
      // },
      // sass: {
      //   // @/ 是 src/ 的别名
      //   // 所以这里假设你有 `src/variables.sass` 这个文件
      //   // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      //   additionalData: `@import "~@/styles/index.scss";`
      less: {
        // 注意不同版本配置不同
        // modifyVars: {
        //   "@ant-prefix": name
        // },
        // javascriptEnabled: true
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: {
            // "@ant-prefix": name //antd样式前缀
            "@project-prefix":`${name}-`, //项目名前缀
            "@css-prefix":`ivu-` //ivew样式前缀在这设没用 iview前缀是半成品
          }
        }
        // additionalData: `@ant-prefix: ${name};`
      }
    }
  },

  devServer: {
    // 对webpack devServer 封装多一层兼容所有webpack devServer配置
    port: 9080,
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    hot: true,
    disableHostCheck: true,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    progress: false,
    proxy: {
      "/proxy": {
        // api是代理根地址
        target:
          process.env.NODE_ENV === "mock"
            ? "http://localhost:8001" //代理目标地址 mock地址
            : "http://192.168.36.176", //代理目标地址 dev服务器
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/proxy": "" // proxy在代理时转义成空字符
        }
      }
      // before: function (app, server, compiler) { // webpack dev配置 可以写express router返回假数据
      //   app.get('/some/path', function (req, res) {
      //     res.json({ custom: 'response' });
      //   });
      // }
    }
  },

  pluginOptions: {
    "style-resources-loader": {
      //样式资源预加载插件
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, "./src/styles/index.less"),
      ]
    }
  },

  // configureWebpack: {
  //   // 原生webpack配置项可以覆盖掉部分非vue配置项
  //   output: { //阿里乾坤微前端子应用输出配置
  //     library: `${name}-[name]`,
  //     libraryTarget: "umd", // 把微应用打包成 umd 库格式
  //     jsonpFunction: `webpackJsonp_${name}`
  //   }
  // },
  chainWebpack: config => {
    // 链式操作webpack配置项可以覆盖掉所有配置项
    //     config.module
    //         .rule('vue')
    //         .use('vue-loader')
    //         .loader('vue-loader')
    //         .tap(options => {
    //             // 修改它的选项...
    //             return options
    //         })

    config.plugin("html").tap(args => {
      args[0].title = name;
      return args;
    });
  },

  // pages: {  // 多页面应用配置 如果不用不需要配置
  //     index: {
  //       // page 的入口
  //       entry: 'src/index/main.js',
  //       // 模板来源
  //       template: 'public/index.html',
  //       // 在 dist/index.html 的输出
  //       filename: 'index.html',
  //       // 当使用 title 选项时，
  //       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //       title: 'Index Page',
  //       // 在这个页面中包含的块，默认情况下会包含
  //       // 提取出来的通用 chunk 和 vendor chunk。
  //       chunks: ['chunk-vendors', 'chunk-common', 'index']
  //     },
  //     // 当使用只有入口的字符串格式时，
  //     // 模板会被推导为 `public/subpage.html`
  //     // 并且如果找不到的话，就回退到 `public/index.html`。
  //     // 输出文件名会被推导为 `subpage.html`。
  //     subpage: 'src/subpage/main.js'
  //   },

  // pwa:{ // 一项新的浏览器功能技术 可以提供类似原生应用的服务 （看情况使用）

  // },
  pwa: {
    name: name,
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: path.resolve(__dirname, "src/pwa/service-worker.js")
    }
  }
};
